<template>
	<view class="page flex-col">
		<uni-nav-bar color="white" @clickLeft="back" :fixed="true" :background-color="navColor" status-bar
			left-icon="left" :border="false">
			<view class="top">
				进度汇报
			</view>
		</uni-nav-bar>
		<view class="head"></view>
		<view class="group_4 flex-col">
			<view v-if="model.deptConversionMetricItems.length!=0" class="probd">
			<block  v-for="(item,index) in model.deptConversionMetricItems">
				
					<block v-if="item.isQuantified">
						<view class="box_9 flex-row justify-between">
							<view class="text-group_24 flex-col">
								<text class="text_3">{{item.title}}（{{item.unit}}）</text>
								<text class="text_4">目标值：{{item.targetNum}}</text>
							</view>
							<view>
								<text class="text_5">{{item.completeNum}}</text>
								<text class="text_6">{{item.unit}}</text>
							</view>
						</view>
						
					</block>
					<block v-else>
						<text class="text_18">{{item.title}}：</text>
						<colorfulprogress  :progress="item.completeNum" :readonly="true" width="100%" boder-color="#6052FF" text-color="#fff" bodyColor="#A79FFF"></colorfulprogress>
					</block>
					<view class="divide" v-if="(index+1)!=model.deptConversionMetricItems.length"></view>
				
				
			</block>
			</view>
		</view>
		<view class="group_5 flex-col">
			<block v-for="(item,index) in model.deptConversionMetricProducts">
				<view class="box_13 flex-row justify-between">
					<view class="text-group_28 flex-col">
						<text class="text_20">{{item.productName}}</text>
						<text class="text_21">目标值：{{item.targetNum}}{{item.unit}}</text>
					</view>
					<view>
						<text class="text_22">{{item.completeNum}}</text>
						<text class="text_23">{{item.unit}}</text>
					</view>
					
				</view>
				<view v-if="(index+1)!=model.deptConversionMetricProducts.length" class="divide"></view>
			</block>
			</view>
		
		<view class="box_19 flex-col">
			<text class="text_44">进度详情</text>
			<view class="block_1 flex-col">
				<view class="group_17 flex-row justify-between">
					<view class="text-group_34 flex-col">
						<text class="text_45">{{model.deptName}}</text>
						<text class="text_46">执行负责人：{{model.dueRealName}}</text>
					</view>
					<view>
						<text class="text_47">进度</text>
						<text class="text_48">{{model.progressValue}}%</text>
					</view>
				</view>
				<view class="divide"></view>
				<view class="image-text_3 flex-row justify-between" @tap="back">
					<text class="text-group_12">收起</text>
					<image class="thumbnail_9" referrerpolicy="no-referrer"
						src="../../static/icon/up.png" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import helper from "../../utils/helper";
	import { agingApi as agingApi } from "../../utils/api";
	export default {
		data() {
			return {
				navColor: 'transparent',
				model:{},
				constants: {},
			};
		},
		onPageScroll(e) {
		
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			if (scrollTop < 100) {
				this.navColor = `rgba(37,47,98, ${scrollTop / 100})`; // 根据滚动位置设置透明度
			} else {
		
				this.navColor = 'rgba(37,47,98, 1)'; // 滚动超过一定距离后设为不透明
			}
		},
		onLoad(e){
			this.id=e.id
			this.getinfo()
		},
		methods: {
			async getinfo(){
				var user=(await helper.getUser())
				var result = await agingApi.getreportinfo(this.id);
				if(result.data){
					this.model=result.data
				}
				
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	};
</script>
<style lang="scss">
	@import '../common/common.scss';
	@import './index.scss';
</style>